<template>
<div class="con">
        <div class="top">
            <aside>
                <div class="resize"></div>
                <div class="line"></div>
                <section>SIDE</section>
            </aside>
            <main>
                MAIN
            </main>
            <aside class="right">
                <div class="resize resize-left"></div>
                <div class="line"></div>
                <section>SIDE</section>
            </aside>
        </div>
        <footer>
            <div class="resize resize-top"></div>
            <div class="line"></div>
            <section>bottom</section>
        </footer>
    </div>
</template>

<script>
export default {
  

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body{
  /* 设置了页面的全局边距、字体大小和文本对齐方式*/
    margin: 20px;
    font-size: 24px;
    text-align: center;
}
.con{
  /* 定义了一个容器，使用 flex 布局将页面分为垂直方向的列，设置了固定高度和一个粉色边框 */
    display: flex;
    height: 500px;
    flex-direction: column;
    outline: 4px solid rosybrown;
}
.top{
  /* 顶部区域，使用 flex 布局，高度为 0 但会根据内容自动分配空间。 */
    display: flex;
    flex: 1;
    height: 0;
}
aside{
  /* 左侧侧边栏，相对定位，可拉伸以适应容器，隐藏溢出内容。 */
    position: relative;
    align-self: stretch;
    overflow: hidden;
    /* background-color: antiquewhite; */
    
}

main{
  /* 主要内容区域，占据剩余空间，有背景颜色和内边距。 */
    flex: 1;
    align-self: stretch;
    padding: 8px;
    background-color:#e3f2fd;
}
section{
  /* 在各个区域中，绝对定位，设置了内边距和背景颜色，可自动滚动。 */
    position: absolute;
    inset: 0 5px 0 0;
    padding: 8px;
    overflow: auto;
    background-color: antiquewhite;
}
footer{
  /* 底部区域，相对定位。 */
    position: relative;
}
footer section{
  
    background-color:#fbe9e7;
}
.resize{
  /* 定义了可水平拖动调整大小的元素，宽度固定，高度通过变换拉伸，有滚动条，初始透明度为 0。 */
    width: 200px;
    height: 16px;
    transform: scaleY(100);
    /* background-color: cadetblue; */
    overflow: scroll;
    resize: horizontal;
    opacity: 0;
}
.resize-left{
  /* 用于右侧侧边栏的可调整大小元素，通过变换反转方向。 */
    transform: scale(-1, 100);
}
.line{
  /* 线条元素，绝对定位，初始透明度为 0，当鼠标悬停或激活相关的.resize元素时，透明度变为 1。 */
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    bottom: 0;
    background-color: royalblue;
    opacity: 0;
    transition: .3s;
    pointer-events: none;
}
/* 这些选择器定义了当.resize或.resize-left被悬停或激活时，相邻的.line元素的样式变化。 */
.resize:hover+.line,
.resize:active+.line{
    opacity: 1;
}
.resize-left+.line{
    left: 0;
    right: auto;
}
.resize-left~section{
    inset: 0 0 0 4px;
}
/* 用于底部区域的可垂直拖动调整大小的元素，有特定的宽度、最小高度和变换属性。 */
.resize-top{
    width: 16px;
    min-height: 50px;
    resize: vertical;
    transform: scaleY(-1);
    transform: scale(100, -1);
}

/* 定义了与.resize-top相关的.line和<section>元素的样式。 */

.resize-top+.line{
    left: 0;
    width: 100%;
    height: 4px;
    top: 0;
    bottom: auto;
}
.resize-top~section{
    inset: 4px 0 0 0;
}
</style>
